/**
 * by eval .
 */

import React, {Component} from 'react';
import {
  StyleSheet, 
  Text, 
  View,
  Image,
  TouchableOpacity,
} from 'react-native';
import {i18n} from '../../i18n/index';
import { scaleSize } from '../../utils/screen';
import FontText,{fontFamily} from '../components/FontText';
import {Row} from '../components/TableRow';
import menustyle from './style/menu'
const quickBtn = [1,5,10,20,50,100];
const numBtn = [1,2,3,4,5,6,7,8,9];
export default class CashDrawer extends Component {
  constructor(props){
    super(props);
    this.state = {
      keyword:"",
      priceNum:"",
      m:0
    }
  }
  render() {
    let {keyword,priceNum} = this.state;
    return (
      <View style={styles.container}>
        <View style = {styles.productView}>
          <View style = {styles.cashShow}>
            {
              priceNum
              ?<FontText font = {'book'} style = {styles.inputStyle}>{i18n.t("moneytype")+priceNum}</FontText>
              :<FontText font = {'book'} style = {styles.inputStyle}>{i18n.t("store.cashdrawer.input")}</FontText>
            }
          </View>
          <View style = {styles.inputView}>
            <View style = {styles.quickBox}>
              <TouchableOpacity 
                activeOpacity = {0.8}
                onPress = {()=>this.clearNum()}
                style = {[styles.btn,styles.clearBtn]}>
                <FontText  style = {styles.btnText} font = {'light'}>Clear</FontText>
              </TouchableOpacity>
              <View style = {styles.btnWarpView}>
                {
                  quickBtn.map((item,index)=>{
                    return (
                      <TouchableOpacity
                        key = {`eval_${index}`}
                        activeOpacity = {0.8}
                        onPress = {()=>this.quickNum(item)} 
                        style = {[styles.btn,styles.quicknumBtn]}>
                        <FontText style = {styles.btnText} font = {'light'}>{i18n.t("moneytype")+item}</FontText>
                      </TouchableOpacity>
                    )
                  })
                }
              </View>
            </View>
            <View style = {styles.counterBox}>
              <View style = {[styles.btnWarpView,{marginTop:0}]}>
                {
                  numBtn.map((item,index)=>{
                    return (
                      <TouchableOpacity
                        key = {`eval_${index}`}
                        activeOpacity = {0.8}
                        onPress = {()=>this.num(item)} 
                        style = {[styles.btn,styles.numBtn]}>
                        <FontText style = {styles.btnText} font = {'light'}>{item}</FontText>
                      </TouchableOpacity>
                    )
                  })
                }
              </View>
              <View style = {styles.zeroBtn}>
                <TouchableOpacity
                  activeOpacity = {0.8}
                  onPress = {()=>this.num(10)} 
                  style = {[styles.btn,styles.numBtn]}>
                  <FontText style = {styles.btnText} font = {'light'}>0</FontText>
                </TouchableOpacity>
                <TouchableOpacity
                  activeOpacity = {0.8}
                  onPress = {()=>this.num(100)} 
                  style = {[styles.btn,styles.numBtn,{flex:1,marginLeft:scaleSize(12)}]}>
                  <FontText style = {styles.btnText} font = {'light'}>00</FontText>
                </TouchableOpacity>
              </View>
            </View>
            <View style = {styles.payBox}>
              <TouchableOpacity
                activeOpacity = {0.8}
                onPress = {()=>this.backNum()} 
                style = {[styles.btn,styles.back]}>
                <Image style = {styles.backBtnIcon} source = {require("../../access/imgs/btn_back_icon.png")} />
              </TouchableOpacity>
              <TouchableOpacity
                activeOpacity = {0.8}
                onPress = {()=>this.backNum()} 
                style = {[styles.btn,styles.back]}>
                <FontText font = {'book'} style = {styles.btnText}>{i18n.t("store.cashdrawer.opencash")}</FontText>
              </TouchableOpacity>
            </View>
            <View style = {styles.payBox}>
              <TouchableOpacity
                  activeOpacity = {0.8}
                  onPress = {()=>this.payIn()} 
                  style = {[styles.btn,styles.cashBtn]}>
                  <FontText style = {styles.cashBtnText} font = {'medium'}>{i18n.t("store.cashdrawer.payin")}</FontText>
              </TouchableOpacity>
              <TouchableOpacity
                  activeOpacity = {0.8}
                  onPress = {()=>this.payIn()} 
                  style = {[styles.btn,styles.cashBtn]}>
                  <FontText style = {styles.cashBtnText} font = {'medium'}>{i18n.t("store.cashdrawer.payout")}</FontText>
              </TouchableOpacity>
              <TouchableOpacity
                  activeOpacity = {0.8}
                  onPress = {()=>this.payIn()} 
                  style = {[styles.btn,styles.cashBtn]}>
                  <FontText style = {styles.cashBtnText} font = {'medium'}>{i18n.t("store.cashdrawer.drop")}</FontText>
              </TouchableOpacity>
              <TouchableOpacity
                  activeOpacity = {0.8}
                  onPress = {()=>this.payIn()} 
                  style = {[styles.btn,styles.cashBtn]}>
                  <FontText style = {styles.cashBtnText} font = {'medium'}>{i18n.t("store.cashdrawer.closeshift")}</FontText>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </View>
    );
  }
  onChange(){

  }
  clearNum(){
    this.setState({
      priceNum:0,
      m:0
    })
  }
  quickNum(qnum){
    let {m} = this.state;
    m += qnum*100
    this.changeInput(m);
  }
  payIn(){

  }
  backNum(){
    let {m} = this.state;
    if(m > 0){
      m = parseInt(m/10);
    }else{
      m = 0;
    }
    this.changeInput(m);
  }
  changeInput(m){
    this.setState({
      priceNum:m?(Number(m)/100).toFixed(2):0,
      m:m
    })
  }
  num(t){
    let {m} = this.state;
    if((t == 10 || t == 100)){
      if(m == 0){
        m = t;
      }else{
        m *=t;
      }
    }else{
      m = m*10 + t;
    }
    this.changeInput(m);
  }
  onRadioChange(index){
    this.setState({
      selectIndex:index
    })
  }
  onClassifyPress(index){
    this.setState({
      classIndex:index,
      index:0,
    })
  }
  valuChange(val,key){
    this.setState({
      [key]:val
    })
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',
  },
  productView:{
    flex:1,
    backgroundColor: "#090d17",
  },
  cashShow:{
    height:scaleSize(800),
    paddingHorizontal: scaleSize(30),
    justifyContent: 'center',
    alignItems: 'center',
  },
  inputStyle:{
    fontSize: scaleSize(60),
    color:"#9b9b9b",
    fontFamily:fontFamily.light,
    letterSpacing:10
  },
  inputView:{
    flex:1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingHorizontal: scaleSize(160),
  },
  quickBox:{
    width:scaleSize(310),
  },
  btn:{
    backgroundColor: "#394158",
    borderRadius: scaleSize(5),
    justifyContent: 'center',
    alignItems: 'center',
  },
  clearBtn:{
    height:scaleSize(100)
  },
  cashBtn:{
    borderWidth:1,
    borderColor:"#cfa972",
    backgroundColor: "#090d17",
    height:scaleSize(150)
  },
  btnText:{
    color:"#fff",
    fontSize: scaleSize(36),
    textAlign:"center"
  },
  cashBtnText:{
    color:"#cfa972",
    fontSize:scaleSize(42)
  },
  btnWarpView:{
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    flexDirection: 'row',
    marginTop: scaleSize(15),
  },
  quicknumBtn:{
    width:scaleSize(145),
    height:scaleSize(110),
    marginBottom: scaleSize(16),
  },
  counterBox:{
    width:scaleSize(480),
  },
  numBtn:{
    width:scaleSize(150),
    height:scaleSize(150),
    marginBottom: scaleSize(12),
  },
  zeroBtn:{
    flexDirection: 'row',
  },
  payBox:{
    width:scaleSize(310),
    justifyContent:"space-between",
    paddingBottom:scaleSize(22)
  },
  back:{
    height:scaleSize(150)
  },
  backBtnIcon:{
    width:scaleSize(54),
    height:scaleSize(35)
  },
  payBtn:{
    backgroundColor: "#cfa972",
    height:scaleSize(310),
    marginTop: scaleSize(12),
  },
  payBtnText:{
    color:"#ffffff",
    fontSize: scaleSize(42),
  }
});
